<template>
	<view class="container">
		<up-sticky offset-top="0">
			<view class="header">
				<view class="title" :style="{ paddingTop:bannerTop }">
					<view class="city">
						<up-icon name="map-fill" color="#fff" size="28rpx"></up-icon>
						<view class="txt city_txt">重庆</view>
					</view>

				</view>
				<view class="search" @click="toRouter">
					<up-icon size="40rpx" color="#dd0505" name="search"></up-icon>
					<view class="txt">想要找点什么？</view>
					<view class="btn">
						<up-button color="#dd0505" shape="circle" size="small" text="搜索"></up-button>
					</view>
				</view>
			</view>
		</up-sticky>
		<view class="swiper"> <up-swiper imgMode="widthFix" bgColor="rgba(0,0,0,0)" radius="20rpx"
				:list="bannerList"></up-swiper></view>

		<view class="nav-box">
			<view v-for="(item, index) in newNavList" :key="index" class="nav-item" @click="onTicket(item,'')">
				<view class="nav-icon">
					<image style="width: 138rpx;height: 138rpx;" :src="item.icon">
					</image>
				</view>
				<view class="nav-name">{{item.name}}</view>
			</view>

		</view>
		<!--<view class="title-box">
			<view class="title-icon"></view>
			<view class="title-name">服务推荐</view>
		</view>
			<view class="banner">
			 <view class="menu_1">
				<block v-for="(item, index) in silde_1" :key="index">
					<view class="menu_1_item" @click="onTicket(item,'家教')">
						<image style="width: 60rpx;height: 60rpx;margin:0 10rpx 0 10rpx;"
							:src="item.icon!=''?item.icon:'/static/images/icon1.png'"></image>
						<view>{{item.name}}</view>
					</view>
				</block>
			</view>
			<swiper class="swiper_n" @change="swiperChange">
				<swiper-item v-for="(item, index) in navList" :key="index">
					<view class="swiper-item_n">
						<view class="menu_2_item" style="color: rgb(0, 153, 0);  font-size: 24rpx;">
							<view v-for="(item_1, index1) in item.a" :key="index1" class="menu_3_item"
								@click="onTicket(item_1,'')">
								<image style="width: 60rpx;height: 60rpx;margin:0 10rpx 0 10rpx;"
									src="https://tcxx.xianmaxiong.com/file/uploadPath/2023/07/12/46567c35bea1a43896f891ed99e03348.png">
								</image>
								<view>{{item_1.name}}</view>
							</view>
						</view>
						<view class="menu_2_item" style="color: rgb(201, 0, 201); font-size: 24rpx;">
							<view v-for="(item_1, index1) in item.b" :key="index1" class="menu_3_item"
								@click="onTicket(item_1,'')">
								<image style="width: 60rpx;height: 60rpx;margin:0 10rpx 0 10rpx;"
									src="https://tcxx.xianmaxiong.com/file/uploadPath/2023/07/12/46567c35bea1a43896f891ed99e03348.png">
								</image>
								<view>{{item_1.name}}</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>


		<view class="dots">
			<block v-for="(item, index) in navList" :key="index">
				<view :class="['dot',{'active':index === swiperCurrent}]"></view>
			</block>
		</view>
		 -->
		<up-sticky offset-top="280rpx">
			<view class="tabs-box">
				<up-tabs :current="current" @click='reset' :list="categoryList" lineColor="#e20505" :activeStyle="{
		     color: '#e20505',
		 	fontWeight: 'bold',
		 }" :inactiveStyle="{
		     color: '#303133',
		    
		 }"></up-tabs>
			</view>
		</up-sticky>

		<view v-if="list.length>0" class="userinfo first" v-for="(item,index) in list" :key="index"
			@click="onDetail(item)">
			<view style="margin-top: 24rpx;margin-left: 15rpx;">
				<up-image width="100rpx" height="130rpx"
					:src="item.avatar?item.avatar:'/static/images/index/teacher_m.jpg'" :lazy-load="true"
					mode="aspectFill">
					<template #error>
						<view style="font-size: 24rpx;">加载失败</view>
					</template>
				</up-image>
			</view>
			<view class="userinfo-right">
				<view class="user-info">{{item.userName}} </view>
				<view class="icon-box">
					<view class="iconfont icon-yonghurenzheng"></view>
					<view class="icon-txt">实名认证</view>
					<view class="iconfont icon-guanlirenzheng"></view>
					<view class="icon-txt">平台保障</view>
				</view>
				<view class="user-marks">
					<up-rate readonly size="30rpx" gutter="1" v-model="item.marks" inactive-color="#b2b2b2"></up-rate>
					<text>{{item.marks?item.marks.toFixed(1):'0.0'}}</text>
				</view>
				<view class="user-detail">
					<view>
						{{getAge(item.birthday)}}岁
					</view>
					<view class="s_txt">
						|
					</view>
					<view>
						渝北
					</view>
					<view class="s_txt">
						|
					</view>
					<view>
						
						{{getAge(item.workAt)}}年经验
					</view>
				</view>

				<view class="user-tag" v-if="item.labels && JSON.parse(item.labels).length>0">
					<view class="tag-item" v-for="(tag,tagIndex) in JSON.parse(item.labels)" :key="tagIndex">
						{{tag}}
					</view>
				</view>

				<view class="user-des">
					<up-text color="#bbb" :lines="1" size="24rpx" :text="item.advantage"></up-text>

				</view>

				<!-- <view class="userinfo-1">
					<view class="userinfo-2">
						<view class="userinfo-name">
							{{item.userName}}
						</view>
						<view class="userinfo-level">
							L{{item.vip}}
						</view>
						<view class="userinfo-tuijian">
							推荐
						</view>
						
					</view>
					<view class="userinfo-year">
						从业{{item.work}}年
					</view>
				</view>
				<view style="display: flex;margin-top: 12rpx;">
					<view class="userinfo-21" style="width: 106rpx;">
						<view style="display: none;">¥50/时</view>
					</view>
					<view class="userinfo-22">
						<image style="height: 26rpx;width: 26rpx;margin: 0 4rpx 0 4rpx;"
							src="/static/images/index/sex.png"></image>
						{{item.birthday}}
					</view>
					<view class="userinfo-23">
						<image style="height: 30rpx;width: 30rpx;" src="/static/images/index/3.png"></image>
					</view>
					<view class="userinfo-24">
						<image style="height: 30rpx;width: 30rpx;" src="/static/images/index/4.png"></image>
					</view>
					<view class="userinfo-25">
						<image style="height: 30rpx;width: 30rpx;" src="/static/images/index/5.png"></image>
					</view>
					<view class="userinfo-26">
						<image style="height: 30rpx;width: 30rpx;" src="/static/images/index/6.png"></image>
					</view>
					<view class="userinfo-27">
						距离{{item.distance}}
					</view>
				</view>
				<view class="userinfo-28">
					{{item.advantage}}
				</view>
				 -->
			</view>
		</view>
		<view v-if="list.length==0" class="empty_index">
		</view>
		<view style="height: 40rpx;line-height: 40rpx;"></view>
	</view>
</template>


<script>
	import {
		useStore
	} from '@/store/index.js'
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	import {
		reactive,
		toRefs,
		ref,
		watch,
		computed,
		onMounted,
	} from "vue"
	import {
		categoryHomeApi,
		serviceHomeApi,
		homeServerList,
		categoryServerList,
	} from '@/api/service'
	import baseURL from '@/config/config'

	export default {

		setup() {
			const store = useStore()
			const state = reactive({
				userInfo: computed(() => store.userInfo),
				list: [],
				current: 0,
				categoryId: 0,
				xing: 3,
				bannerTop: 0,
				categoryList: [],
				bannerList: [
					'https://testpps.jixuantiant.com/ppsapi/static/1728812626831_VAZmiAa09AsR7e7ae6eca0a30926f18069572610305d.jpg'
				],
				newNavList: [{
						id: 8,
						icon: '/static/images/index/jyfw.png',
						name: "教育培训",
					},
					{
						id: 9,
						icon: '/static/images/index/ysfw.png',
						name: "保姆月嫂",
					},
					{
						id: 9,
						icon: '/static/images/index/bjfw.png',
						name: "家政生活",
					},
					{
						id: 0,
						icon: '/static/images/index/wxfw.png',
						name: "维修服务",
					},
					{
						id: 0,
						icon: '/static/images/index/jyfw.png',
						name: "餐饮美食",
					},
					{
						id: 0,
						icon: '/static/images/index/mrfw.png',
						name: "丽人美容",
					},
					{
						id: 0,
						icon: '/static/images/index/zxfw.png',
						name: "装修建材",
					},
					{
						id: 0,
						icon: '/static/images/index/ylfw.png',
						name: "休闲娱乐",
					},
					{
						id: 0,
						icon: '/static/images/index/hqfw.png',
						name: "婚庆摄影",
					},
					{
						id: 0,
						icon: '/static/images/index/nyfw.png',
						name: "旅游酒店",
					},
				],
				silde_1: [{
					id: 0,
					icon: '/static/images/icon1.png',
					name: "小学",
				}],
				navList: [{
					a: [{

						id: 0,
						icon: '/static/images/icon1.png',
						name: "小学",
					}],
					b: [{

						id: 0,
						icon: '/static/images/icon1.png',
						name: "小学",
					}],
				}],
				goodDetailModalVisible: false,
				node: "",
				swiperCurrent: 0,
			})
			onLoad(() => {
				getData()
				getList()
				state.bannerTop = wx.getMenuButtonBoundingClientRect().top + "px"
			})




			const getData = async () => {
				const {
					data
				} = await categoryHomeApi()
				let categoryList = data.filter((item) => !item.parentId)
				if (categoryList.length > 0) {
					let arr = [{
						name: '全部',
						value: 0
					}]
					categoryList.forEach((item) => {
						arr.push({
							name: item.name,
							value: item.id
						})
					})
					state.categoryList = arr
				}

				var tmp = [];
				data.forEach(im => {
					if (im.parentId == 8) {
						if (im.icon == 'null') im.icon = '';
						if (im.icon == null) im.icon = '';
						if (im.icon != '') im.icon = baseURL.imgURL + im.icon;
						tmp.push(im);
					}
				});
				tmp.sort((a, b) => a.id - b.id);
				state.silde_1 = tmp;

				var tmp2 = [];
				data.forEach(im => {
					if (im.parentId == 8 || im.parentId == 9) {
						if (im.icon == 'null') im.icon = '';
						if (im.icon == null) im.icon = '';
						if (im.icon != '') im.icon = baseURL.imgURL + im.icon;
						tmp2.push(im);
					}
				});
				tmp2.sort((a, b) => a.id - b.id);
				let navList = [];
				let currentItem = {
					a: [],
					b: []
				};
				tmp2.forEach(item => {
					// 检查当前对象a或b是否已满  
					if (currentItem.a.length < 5) {
						currentItem.a.push(item);
					} else if (currentItem.b.length < 5) {
						currentItem.b.push(item);
					} else {
						// 如果a和b都满了，则创建一个新的对象并添加到navList中  
						navList.push(currentItem);
						currentItem = {
							a: [item],
							b: []
						}; // 或者只将item添加到新对象的a中，b留空  
					}
				});
				// 如果tmp2遍历完成后，currentItem非空且未添加到navList中，则添加它  
				if ((currentItem.a.length > 0 || currentItem.b.length > 0)) {
					navList.push(currentItem);
				}
				console.log(tmp2);
				console.log(currentItem);
				state.navList = navList
			}
			const getList = async () => {
				const {
					data
				} = await homeServerList()
				data.forEach(im => {
					if (im.avatar == null) im.avatar = '';
					if (im.avatar == 'null') im.avatar = '';
					if (im.distance == null) im.distance = '--';
					if (im.distance == 'null') im.distance = '--';
					//workAt
					
				});
				state.list = data
			}
			const onTicket = async (item, type) => {
				uni.navigateTo({
					url: "/pages/second_index/index?id=" + item.id + "&name=" + item.name + type,
				})
			}
			const swiperChange = async (e) => {
				this.swiperCurrent = e.detail.current;
			}
			const onDetail = (item) => {
				uni.navigateTo({
					url: `/subpages/cateinfo/detail?uid=${item.uid}&id=${item.id}`
				})
			}

			const getAge = (val) => {
				let currentYear = new Date().getFullYear() //当前的年份
				let calculationYear = new Date(val).getFullYear() //计算的年份
				const wholeTime = currentYear + val.substring(4) //周岁时间
				const calculationAge = currentYear - calculationYear //按照年份计算的年龄
				//判断是否过了生日
				if (new Date().getTime() > new Date(wholeTime).getTime()) {
					return calculationAge
				} else {
					return calculationAge - 1
				}
			}


			const toage = (birthday) => {
				if (birthday == null || birthday == '') return '--';
				try {
					var birthDate = new Date(birthday);
					var today = new Date();
					var age = today.getFullYear() - birthDate.getFullYear();

					// 检查是否已过今年的生日  
					var m = today.getMonth() - birthDate.getMonth();
					if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
						age--;
					}
					return age;
				} catch {
					return '--'
				}
			}
			const getServerList = async () => {
				const {
					data
				} = await categoryServerList({
					type: 0,
					categoryId: state.categoryId
				})
				console.log(data.records)
				state.list = data.records

			}
			const reset = (data) => {
				console.log(data)
				if (data.value === 0) {
					getList()
				} else {
					state.categoryId = data.value
					getServerList()

				}

			}
			const toRouter = () => {
				uni.navigateTo({
					url: '/pages/search/index'
				})
			}
			return {
				...toRefs(state),
				reset,
				getAge,
				getServerList,
				onTicket,
				swiperChange,
				onDetail,
				toRouter
			}
		}

	}
</script>
<style>
	page {
		background-color: #EFEFEF;
	}
</style>
<style lang="scss" scoped>
	/* #ifdef H5 */
	page {
		height: auto;
		min-height: 100%;
		background: #efefef;


	}

	/* #endif */
	.container {
		min-height: 100%;
	}

	.header {
		height: 260rpx;
		padding: 0 20rpx 20rpx 20rpx;
		margin-bottom: 20rpx;
		//background-image: linear-gradient(red, #ffffff);

		background-image: url(/static/images/index/index_bj.jpg);
		background-size: 100%;

		.title {
			display: flex;
			// justify-content: space-between;
			margin: 0 40rpx 40rpx 0rpx;
			color: #fff;

			.city {
				padding-left: 20rpx;
				width: 600rpx;
				display: flex;

				.city_txt {
					margin-left: 10rpx;
				}

				.txt {
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.search {
			position: relative;
			display: flex;
			width: 690rpx;
			align-items: center;
			padding-left: 20rpx;
			border-radius: 80rpx;
			background-color: rgba(255, 255, 255, 0.9);
			height: 70rpx;
			margin-bottom: 10rpx;

			.btn {
				position: absolute;
				z-index: 10;
				width: 100rpx;
				top: 6rpx;
				right: 30rpx;
			}

			.txt {
				font-size: 28rpx;
				color: #999;
			}

		}


	}

	.nav-box {
		margin: 0 20rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		display: flex;
		font-size: 26rpx;
		color: #666;
		flex-wrap: wrap;

		.nav-item {
			width: 20%;

			.nav-icon {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.nav-name {
				display: flex;
				justify-content: center;
				align-items: center;
			}

		}
	}

	.title-box {
		margin: 20rpx;
		display: flex;

		.title-icon {
			width: 4rpx;
			background: #cc0000;
			border-radius: 2rpx;
			margin-right: 20rpx;
		}

		.title-name {
			font-size: 36rpx;
			font-weight: 500;
		}
	}


	.name-center {
		position: absolute;
		// top: 437rpx;
		height: 250rpx;
		width: 710rpx;
		left: 50%;
		transform: translate(-50%);
		border-radius: 16rpx;
		background-color: #fff;
		z-index: 100;
		display: flex;

		.left {
			margin-left: 36rpx;
			margin-top: 40rpx;
			// background: #D8D8D8;
			height: 170rpx;
			width: 170rpx;
			border-radius: 20rpx;

			.left-img {
				width: 170rpx;
				height: 170rpx;
				border-radius: 10rpx;
			}
		}

		.right {
			margin-left: 20rpx;
			margin-top: 32rpx;

			.name {
				font-size: 36rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: 600;
				color: #2F2F2F;
				line-height: 50rpx;
			}

			.stime {
				margin-top: 13rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #616161;
				line-height: 33rpx;
			}

			.etime {
				margin-top: 5rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #616161;
				line-height: 33rpx;
			}

			.site {
				margin-top: 15rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #616161;
				line-height: 33rpx;
				display: flex;
				justify-content: space-between;
				width: 480rpx;

				.map {
					display: flex;
					margin-right: 20rpx;

					.arrow {
						margin-left: 20rpx;
					}
				}
			}
		}
	}


	.swiper {
		padding: 0 20rpx;
		margin-bottom: 20rpx;
	}

	.swiper_n {
		margin-top: 20rpx;
		height: 280rpx;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0px -5px 5px rgba(177, 39, 29, 0.3);
	}

	.swiper-item_n {
		//padding-top: 40rpx;
		//padding-left: 40rpx;
		padding: 20rpx;
		display: block;

		text-align: center;
		border: 0rpx solid #979797;

	}

	.banner {
		position: relative;
		width: 100%;
		// height: 600rpx;



		.intro {
			position: absolute;
			top: calc(50rpx + var(--status-bar-height));
			left: 40rpx;
			color: #FFFFFF;
			display: flex;
			flex-direction: column;

			.greet {
				font-size: 32rpx;
				;
				margin-bottom: 10rpx;
			}

			.note {
				font-size: 24rpx;
			}
		}
	}

	.content {
		display: flex;
		justify-content: center;
	}

	.title_a {
		font-size: 36rpx;
		font-family: SourceHanSerifCN, SourceHanSerifCN;
		font-weight: 800;
		color: #000000;
		margin-left: 40rpx;
		margin-top: 80rpx;
	}

	.contact {
		width: 150rpx;
		height: 150rpx;
		z-index: 999;
		opacity: 0;
		margin-top: -190rpx;
	}

	.contact-call {
		width: 100%;
		height: 40rpx;
	}

	.contact-close {
		display: flex;
		flex-direction: row-reverse;
	}

	.margintop120 {
		margin-top: 210rpx;
	}

	.margintop50 {
		margin-top: 50rpx;
	}

	.menu {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 40rpx 40rpx 20rpx 40rpx;

		.menu_item {
			display: flex;
			justify-content: space-between;
			height: 189rpx;
			width: 325rpx;
			border-radius: 20rpx;
			background: #F3F3F3;
			align-items: center;
			padding-left: 20rpx;
			padding-right: 30rpx;

			.menu_name {
				font-size: 32rpx;
				font-family: SourceHanSerifCN, SourceHanSerifCN;
				font-weight: bold;
				color: #383838;
				padding-bottom: 32rpx;
			}

			.menu_tip {
				font-size: 24rpx;
				font-family: SourceHanSerifCN, SourceHanSerifCN;
				font-weight: bold;
				color: #38383880;
			}
		}

		.menu_item2 {
			display: flex;
			flex-direction: column;
			height: 189rpx;
			border-radius: 20rpx;
			background: #F3F3F3;
			justify-content: center;

			padding-left: 20rpx;
			padding-right: 30rpx;

			.menu_name {
				font-size: 32rpx;
				font-family: SourceHanSerifCN, SourceHanSerifCN;
				font-weight: bold;
				color: #383838;
				padding-bottom: 32rpx;
			}

			.menu_tip {
				font-size: 24rpx;
				font-family: SourceHanSerifCN, SourceHanSerifCN;
				font-weight: bold;
				color: #38383880;
			}
		}
	}

	.good-detail-modal {
		background-image: linear-gradient(180deg, #fff7e3, transparent) !important;
		width: 100%;
		// height: 100%;
		display: flex;
		flex-direction: column;

		.cover {
			padding: 10rpx 0;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;

			.image {
				width: 260rpx;
				height: 260rpx;
			}

			.btn-group {
				position: absolute;
				right: 10rpx;
				top: 0rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;

				image {
					width: 80rpx;
					height: 80rpx;
				}
			}
		}

		.detail {
			width: 100%;
			min-height: 1vh;
			// max-height: calc(90vh - 320rpx - 80rpx - 120rpx);

			.wrapper {
				width: 100%;
				height: 100%;
				overflow: hidden;

				.basic {
					padding: 0 20rpx 30rpx;
					display: flex;
					flex-direction: column;

					.name {
						font-size: 36rpx;
						font-weight: bold;
						// color: $text-color-base;
						// margin-bottom: 10rpx;
						text-align: center;
						margin-top: 30rpx;
					}

					.tips {
						font-size: 24rpx;
						color: #878889;
					}

					.button_btn {
						font-size: 32rpx;
						font-weight: 400;
						color: #2F2F2F;
						text-align: center;
						line-height: 40rpx;
						margin-top: 20rpx;
					}

				}


			}
		}

	}

	.level-benefit-box {
		position: absolute;
		width: 100%;
		display: flex;

		// padding: 30rpx;
		flex-direction: column;
		background-color: red;
		height: 20rpx;

		.row {
			display: flex;
			padding: 42rpx 0 20rpx;
			justify-content: space-around;
			align-items: center;

			.grid {
				width: 25%;
				display: flex;
				flex-direction: column;
				font-size: 24rpx;
				color: #919293;
				align-items: center;

				image {
					width: 98rpx;
					height: 98rpx;
					margin-bottom: 28rpx;
				}
			}
		}
	}


	.placeholder-input {
		color: rgb(250, 250, 250);
	}

	.menu_1 {
		display: flex;
		margin-left: 10rpx;
		margin-right: 10rpx;
		padding-top: 10rpx;
		padding-left: 40rpx;
		width: 730rpx;
		height: 144rpx;
		background-size: 100% 100%;
		background-image: url(/static/images/index/bj2.png);
		color: rgb(255, 48, 9);
	}

	.menu_1_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 140rpx;
	}

	.menu_2_item {
		height: 130rpx;
		width: 100%;
		display: flex;
	}

	.menu_3_item {
		width: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 导航点 */
	.dots {
		margin: 0 10rpx 0 10rpx;
		// position: absolute;
		background: #fff;
		left: 0;
		right: 0;
		bottom: 10rpx;
		display: flex;
		justify-content: center;
		height: 20rpx;

		.dot {
			margin: 0 4rpx;
			width: 60rpx;
			height: 9rpx;
			background: #E2E1DD;
		}

		.active {
			width: 60rpx;
			height: 9rpx;
			background: #F76820;
			border-radius: 15rpx;
		}
	}

	.tabs-box {
		background: #efefef;
	}

	.userinfo {
		display: flex;
		min-height: 175rpx;
		margin: 4rpx 10rpx 0 10rpx;
		background-color: #fff;
	}

	.userinfo-right {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin-left: 20rpx;
		margin-top: 18rpx;

		.user-detail {
			padding-bottom: 10rpx;
			display: flex;
			font-size: 24rpx;
			color: #666;

			.s_txt {
				margin: 0 16rpx;
				color: #eee;
				font-size: 24rpx;

			}
		}

		.icon-box {
			display: flex;

			view {
				display: flex;
				height: 28rpx;
				align-items: center;
				margin-right: 10rpx;
				padding: 10rpx 0;
			}

			.icon-yonghurenzheng {
				color: #ff241d;
				font-size: 28rpx;
			}

			.icon-guanlirenzheng {
				color: #02cc93;
				font-size: 28rpx;
			}

			.icon-txt {
				font-size: 24rpx;
				color: #666666;
			}
		}

		.user-info {
			display: flex;
			font-size: 32rpx;
			justify-content: space-between;
			padding-bottom: 10rpx;
		}

		.user-marks {
			padding-bottom: 10rpx;
			display: flex;

			text {
				margin-left: 10rpx;
				color: #FA3534;
				font-size: 24rpx;
			}
		}

		.user-tag {
			display: flex;
			margin-bottom: 10rpx;

			.tag-item {
				margin-right: 10rpx;
				border: 1rpx solid #ffa719;
				text-align: center;
				padding: 4rpx 6rpx;
				color: #ffa719;
				font-size: 20rpx;
			}
		}

		.user-des {
			padding-bottom: 10rpx;
		}

	}

	.userinfo-1 {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
	}

	.userinfo-2 {
		display: flex;
	}

	.userinfo-name {
		font-size: 30rpx;
		width: 160rpx;

	}

	.userinfo-level {
		font-size: 28rpx;
		margin-left: 5rpx;
		width: 60rpx;
		height: 48rpx;
		line-height: 48rpx;
		border-radius: 8rpx;
		background-color: rgb(255, 195, 13);
		text-align: center;
		color: #fff;
	}

	.userinfo-tuijian {
		font-size: 28rpx;
		margin-left: 5rpx;
		width: 80rpx;
		height: 48rpx;
		line-height: 48rpx;
		border-radius: 8rpx;
		background-color: rgb(255, 59, 64);
		text-align: center;
		color: #fff;
	}

	.userinfo-xin {
		margin-left: 5rpx;
		margin-top: 10rpx;
	}

	.userinfo-year {
		color: rgb(182, 182, 182);
		margin-right: 4rpx;
	}

	.userinfo-21 {
		font-size: 28rpx;
		color: rgb(13, 181, 86);
	}

	.userinfo-22 {
		font-size: 26rpx;
		border: 2rpx solid rgb(251, 115, 161);
		border-radius: 8rpx;
		color: rgb(251, 115, 161);
		margin-left: 20rpx;
		width: 80rpx;
		display: flex;
		align-items: center;
	}

	.userinfo-23 {
		margin-left: 10rpx;
	}

	.userinfo-24 {
		margin-left: 10rpx;
	}

	.userinfo-25 {
		margin-left: 10rpx;
	}

	.userinfo-26 {
		margin-left: 10rpx;
	}

	.userinfo-27 {
		margin-left: 40rpx;
		color: rgb(185, 185, 185);
	}

	.userinfo-28 {
		// margin-top: 12rpx;
		color: rgb(140, 140, 140);
		font-size: 28rpx;
	}
</style>